<template>

	<div class = "div1">
		<el-backtop target = ".div1"></el-backtop>
		<!-- 头部 -->
		<Head :data = "searchList" style = "background: #fff;"></Head>
		<!-- 中部 -->
		<div class = "tong one">
			<div class = "imgs box">
				<!-- <img src="../../assets/foot/app.png" class="imgTop " /> -->
				<el-image class = "imgTop " :src = "imgUrl" :preview-src-list = "goodsDetails.img">
				</el-image>
				<div class = "imgList">
					<img v-for = "(ietm,index) in goodsDetails.img" :key = "index" class = "imgName" :src = "ietm" @click = "imgBtn(ietm)"
						 v-if = "index<4"/>
				</div>
				<div v-if = "title !='拼团购'" style = "margin-top: 5px" @click = "setCheck()">
					<i v-if = "isCheck" class = "el-icon-star-off"></i>
					<i style = "color: red" v-if = "!isCheck" class = "el-icon-star-on"></i>
					收藏商品</div>
			</div>
			<div class = "oneRight box">
				<div class = "titleR">{{ goodsDetails.title }}</div>
				<div class = "moneyR">
					<span class = "leftR">到手价</span>
					<span class = "xiao">¥</span>
					<span class = "xianjiaR" v-if = "title != '拼团购'">{{ userId ? goodsDetails.memberPrice : goodsDetails.price }}</span>
					<span class = "xianjiaR" v-else>{{ goodsDetails.memberPrice }}</span>
					<span class = "xiao yuanjia">¥ {{ goodsDetails.originalPrice }}</span>
				</div>
				<div class = "guige">
					<!-- <div v-if = "title != '拼团购'">
						<div class = "guigeT guigeL">分享赚</div>
						<div class = "guigeT guigeR"><span class = "">¥</span>{{ shengji }}</div>
												<div class = "guigeT guigeR" v-else><span class = "">¥</span>{{ shengji}}</div>
					</div> -->
					<div>
						<div class = "guigeT guigeL">销 量</div>
						<div class = "guigeT guigeR">{{ goodsDetails.goods.sales }}</div>
					</div>
					<div>
						<div class = "guigeT guigeL">配 送</div>
						<div class = "guigeT guigeR">
							<el-cascader style = "width:300px" size = "large" :options = "options" ref = "cascaderAddr"
										 v-model = "storeAddress" :placeholder = "storeAddre" @change = "handleChange55"
										 :value = "storeAddre">
							</el-cascader>
						</div>
					</div>
				</div>
				<div class = "guige guige2">
					<div v-if="goodsDetails.goods.attr.length" >
						<div v-for = "(item,index) in goodsDetails.goods.attr[0].attrValue">
							<div class = "guigeT guigeL">{{ item.value }}</div>
							<div class = "guigeT guigeR">
								<div class = "guigelist" v-for = "(item1,index1) in item.detail" :key = "index1"
									 :class = "item.goodsId == index && item.attrId == index1 && item1.state != '' ?'active1':''"
									 @click = "guigeBtn(item1,index,index1)">
									{{ item1.name }}
								</div>
							</div>
						</div>
					</div>

					<div>
						<div class = "guigeT guigeL">数 量</div>
						<div class = "guigeT guigeR">
							<el-input-number size = "mini" v-model = "num" @change = "handleChange" :min = "1" :max = "10" label = "描述文字">
							</el-input-number>
						</div>
					</div>

				</div>
				<div class = "btns">
					<button v-if = "title != '拼团购'" class = "goumai" @click = "onClick()">立即购买</button>
					<button v-if = "title != '拼团购'" class = "jiagou" @click = "onCars()">加入购物车</button>
					<button v-if = "title == '拼团购'" class = "goumai" @click = "onClick()">立即开团</button>
				</div>
				<div class = "pintuan">
					<div class = "pintuan-title">拼团列表</div>
					<div class = "pintuan-list" v-for = "(item, index) in groupList">
						<div class = "pintuan-item" v-for = "(ite, ind) in item.pinkUserList">
							<div class = "name">{{ ite.nickName }}</div>
							<div class = "num">还差<span style = "color:#f00;">{{ item.needNumber - item.countNumber }}</span>人拼成</div>
							<div class = "endTime">结束时间: <span style = "color: #F00">{{ item.endTime }}</span> </div>
							<div class = "pintuan-but" @click="goPinDan(item.pinkUserList,item.id)">去参团</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class = "tong two">
			<div class = "twoL">
				<div class = "twoTitle">热卖推荐</div>
				<goodsItem :isVip = "relationId!='null'&& userId?true: false" :data = "dataList2"></goodsItem>
			</div>
			<div class = "twoR">
				<div class = "div">
					<ul class = "navgator">
						<li class = "navgatorLi" :class = "{'isActive': index==navgatorIndex}" @click = "handleLeft(index)"
							v-for = "(item,index) in navgator" :key = "index">{{ item }}</li>
					</ul>
					<ul class = "rightList">

						<div :id = "'id'+index" v-for = "(item,index) in listBox" :key = "index">
							<div class = "" v-if = "index==0">
								<div class = "oneR">
									<img class = "icon" src = "../../assets/index/icon.png"/>
									商品展示
								</div>
								<!--								{{goodsDetails.img}}-->
								<div class = "oneC" v-html = "goodsDetails.descrition"></div>
							</div>
							<div class = "" v-if = "index==1">
								<div class = "oneR">
									<img class = "icon" src = "../../assets/index/icon.png"/>
									全部评论
								</div>
								<div class = "oneC">
									<div class = "pinglunList" v-for = "(item2,index2) in pinglunLists.content" :key = "index2">
										<div>
											<div class = "plName">用户{{ item2.userName }}</div>
											<!--											<div class = "plName">颜色分类 : {{ item2.sku }}</div>-->
										</div>
										<div class = "pinglun">{{ item2.content }}</div>
										<!-- <img src="../../../static/19.png" class="imgUrl" /> -->
										<el-image class = "imgUrl" v-for = "(item1,index1) in item2.img" :key = "index1" :src = "item1"
												  :preview-src-list = "item2.img"></el-image>
										<div class = "pinglunTime">{{ item2.createTime }}</div>
									</div>

								</div>
								<div class = "three" v-if = "pinglunLists.totalElements">
									<el-pagination background style = "text-align: center;padding-bottom: 50px;"
												   layout = "prev, pager, next" :total = "pinglunLists.totalElements"
												   @current-change = "handleCurrentChange" :current-page = "page" :page-size = "size">
									</el-pagination>
								</div>
							</div>
						</div>
					</ul>
				</div>
			</div>
		</div>

		<el-dialog style="margin-top: 25vh" title = "规格" :visible.sync = "dialogVisible" width = "30%" :before-close = "handleClose">
			<div v-if="goodsDetails.goods.attr.length">
				<div  v-for = "(item,index) in goodsDetails.goods.attr[0].attrValue">
					<div class = "guigeT guigeL">{{ item.value }}</div>
					<div class = "guigeT guigeR">
						<div class = "guigelist" v-for = "(item1,index1) in item.detail" :key = "index1"
							 :class = "item.goodsId == index && item.attrId == index1 && item1.state != '' ?'active1':''"
							 @click = "guigeBtn(item1,index,index1)">
							{{ item1.name }}
						</div>
					</div>
				</div>
			</div>
			<span slot = "footer" class = "dialog-footer">
				<el-button @click = "dialogVisible = false">取 消</el-button>
				<el-button type = "primary" @click = "cantuan()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 底部 -->
		<Foots></Foots>

	</div>

</template>

<script>
	import Head from '@/components/head.vue'
	import Foots from '@/components/foots.vue'
	import goodsItem from "@/components/goods-item2"
	import {regionData} from 'element-china-area-data'

	export default {
		components: {
			Head,
			Foots,
			goodsItem
		},
		data() {
			return {
				dialogVisible: false,
				page: 1,
				size: 10,
				goodsDetails: {
					sku: [],
					goods: {
						sales: 0,
						attr: [{
							attrValue: []
						}],
					},
				},
				imgUrl: '',
				srcList: [],
				imgList: [],
				attrValue: [],
				checkString: '',
				checkStateList: [],
				numberMoney1: '',
				Maxnumber: 0,
				skuId: 0,
				attrValuecoverImg: '',
				relation: false,
				ggxz: false,
				number: 0,
				searchList: ['粽子', '防晒霜', '洗衣液', '蚊香液', '抽纸', '零食'],
				dataList2: [],
				options: regionData,
				storeAddre: '请选择城市',
				storeAddress: '',
				province: '', //省
				city: '', //市
				district: '', //区
				guigelist: ['100ml', '150ml', '200ml'],
				active1: 0,
				num: 1,
				active: 0,
				navgator: ['商品展示', '全部评论'],
				navgatorIndex: 0,
				listBox: [
					'A', 'B'
				],
				listBoxState: true, //点击导航栏时，暂时停止监听页面滚动
				pinglunLists: {},
				goodsId: '',
				new_goodsId: '',
				carLists: [],//购物车
				relationId: window.localStorage.getItem('relationId'),	//邀请码
				userId: this.$cookie.get('userId'),	//用户id
				isCheck: true, //是否收藏
				shoucangId: '',
				shengji: '',
				money: '',
				maxMoney: '',
				title: '',
				groupPinkId: '', //拼团id

				groupList: [], //拼团列表
			}
		},
		mounted() {
			this.title = this.$route.query.title
			this.dataSelect()
			this.pinglunSelect()
			this.remaiSelect()
			this.isCheak()
			this.getMaxMoney()
			this.getGroupList()
		},
		watch: {
			$route: {
				handler: function (val, oldVal) {
					this.new_goodsId = val.query.id
					if (this.new_goodsId != this.goodsId) {
						this.dataSelect()
						this.pinglunSelect()
					}
				}
			}
		},
		methods: {
			handleClose(done) {
				// this.$confirm('确认关闭？').then(_ => {
					done();
				// }).catch(_ => {});
			},
			goNav(e) {
				this.$router.push({
					path: e
				})
			},
			goPinDan(list, id) {
				let boole = false;
				this.groupPinkId = id;
				console.log(list)
				console.log(this.goodsDetails.goods.attr.length)


				for (var i = 0; i < list.length; i++) {
					if (list[i].userId == this.userId) {
						boole = true;
						break;
					}
				}
				if (!boole) {
					if (this.goodsDetails.goods.attr.length>0) {
						this.dialogVisible = true
					} else {
						this.cantuan()
					}
				} else {
					this.$message({
						type: 'error',
						message: '此团已参加过了，不能重复参与！'
					});
				}
			},
			//拼团列表
			getGroupList() {
				this.$http({
					url: this.$http.adornUrl('/selfGroupPink/findByGroupId?groupId=' + this.$route.query.id),
					method: 'post',
					data: this.$http.adornData({
						// 'groupId': this.$route.query.id,
					})
				}).then(({data}) => {
					// console.log(data,'拼团列表')
					if (data.status == 0) {
						this.groupList = data.data
					}
				})
			},
			//是否收藏
			isCheak() {
				this.$http({
					url: this.$http.adornUrl('/selfUserCollect/check'),
					method: 'get',
					params: this.$http.adornParams({
						'goodsId': this.$route.query.id,
						'userId': this.userId,
					})
				}).then(({data}) => {
					if (data.status == 0) {
						this.isCheck = data.data
						this.shoucangId = data.msg;
					}
				})
			},
			//保存浏览记录
			saveBrowse() {
				this.$http({
					url: this.$http.adornUrl('/selfUserBrowse/save'),
					method: 'post',
					data: this.$http.adornData({
						'goodsId': this.goodsDetails.id,
						'coverImg': this.goodsDetails.coverImg,
						'price': this.goodsDetails.price,
						'title': this.goodsDetails.title,
						'userId': this.userId
					})
				}).then(({data}) => {
				})
			},
			//收藏商品
			setCheck() {
				if (this.userId) {
					if (this.isCheck) {
						this.$http({
							url: this.$http.adornUrl('/selfUserCollect/save'),
							method: 'post',
							data: this.$http.adornData({
								'goodsId': this.goodsDetails.id,
								'coverImg': this.goodsDetails.coverImg,
								'price': this.goodsDetails.price,
								'title': this.goodsDetails.title,
								'userId': this.userId
							})
						}).then(({data}) => {
							if (data.status == 0) {
								this.isCheak()
							}
						})
					} else {
						this.$http({
							url: this.$http.adornUrl('/selfUserCollect/delete'),
							method: 'get',
							params: this.$http.adornParams({
								'id': this.shoucangId
							})
						}).then(({data}) => {
							if (data.status == 0) {
								this.isCheak()
							}
						})
					}
				}
			},
			handleChange55(value) {
				value = this.$refs['cascaderAddr'].currentLabels
				this.province = value[0]
				this.city = value[1]
				this.district = value[2]
				this.form.city = value[1]
				if (this.city == '市辖区') {
					this.city = this.province
				}
				if (this.form.city == '市辖区') {
					this.city = this.province
				}
			},
			handleChange(value) {
			},
			handleClick(index) {
				this.active = index
			},
			imgBtn(url) {
				this.imgUrl = url
				var arr = []
				arr.push(url)
				this.srcList = arr
			},
			handleCurrentChange(val) {
				this.page = val
				this.pinglunSelect()
			},
			//规格选择
			guigeBtn(item, index, ind) {
				this.number = 1;
				this.attrValue[index].detail.forEach(d => {
					d.state = '';
				})
				this.checkStateList[index].name = item.name;
				this.attrValue[index].goodsId = index;
				this.attrValue[index].attrId = ind;
				this.attrValue[index].detail[ind].state = '123';
				this.checkString = '';
				this.checkStateList.forEach(d => {
					if (d.name) {
						if (this.checkString) {
							this.checkString = this.checkString + ',' + d.name;
						} else {
							this.checkString = d.name;
						}

					}
				});
				// console.log(111111111111)
				for (var i = 0; i < this.goodsDetails.sku.length; i++) {
					let d = this.goodsDetails.goods.sku[i];
					// console.log(this.goodsDetails.goods.sku[i].detailJson, '---',this.checkString )
					if (d.detailJson == this.checkString) {
						// console.log(33333333)
						if (this.title === '拼团购') {
							if (d.pinkStock > 0) {
								this.numberMoney1 = d.pinkPrice;
								this.Maxnumber = d.pinkStock;
								this.skuId = d.id;
								this.attrValuecoverImg = d.skuImg;
								this.ggxz = true
							} else {
								this.Maxnumber = 0;
								this.$message('库存不足请选择其他的类型')
							}
						} else if (this.title === 'miaosha') {
							if (d.secKillStock > 0) {
								this.numberMoney1 = d.secKillPrice;
								this.Maxnumber = d.secKillStock;
								this.skuId = d.id;
								this.attrValuecoverImg = d.skuImg;
								this.ggxz = true
							} else {
								this.Maxnumber = 0;
								this.$message('库存不足请选择其他的类型')
							}
						} else {
							if (d.stock > 0) {
								if (this.relation) {
									this.numberMoney1 = d.memberPrice;
								} else {
									this.numberMoney1 = d.skuPrice;
								}
								this.ggxz = true
								this.Maxnumber = d.stock;
								this.skuId = d.id;
								this.attrValuecoverImg = d.skuImg;

							} else {
								this.Maxnumber = 0;
								this.$message('库存不足请选择其他的类型')
							}
						}
						break
					} else {

					}
				}
			},
			//参团
			cantuan(e) {
				let userId = this.$cookie.get('userId');
				if (userId) {
					if (e) {
						if (this.goodsDetails.goods.attr.length > 0) {
							if (this.ggxz == false) {
								this.$message('请选择规格')
								return
							}
						} else {
							this.checkString = ''
						}
					}
					this.$router.push({
						path: '/placeOrder?id=' + this.goodsId + '&number=' + this.num + '&checkString=' + this.checkString + '&title=' +
							this.title+ '&groupPinkId=' + this.groupPinkId
					})
				} else {
					this.$notify({
						title: '提示',
						message: '请先前往登录',
						type: 'warning'
					});
				}
			},
			// 购买
			onClick() {
				let userId = this.$cookie.get('userId');
				if (userId) {
					if (this.title != '拼团购') {
						if (this.goodsDetails.attr.length > 0) {
							if (this.ggxz == false) {
								this.$message('请选择正确的商品规格')
								return
							}
						} else {
							this.checkString = ''
						}
					} else {
						if (this.goodsDetails.goods.attr.length > 0) {
							if (this.ggxz == false) {
								this.$message('请选择正确的商品规格')
								return
							}
						} else {
							this.checkString = ''
						}
					}
					this.$router.push({
						path: '/placeOrder?id=' + this.goodsId + '&number=' + this.num + '&checkString=' + this.checkString + '&title=' +
							this.title
					})
				} else {
					this.$notify({
						title: '提示',
						message: '请先前往登录',
						type: 'warning'
					});
				}

			},
			// 加购物车
			onCars() {
				let userId = this.$cookie.get('userId');
				let goodsId = this.$route.query.id
				if (userId) {
					if (this.goodsDetails.attr.length > 0) {
						if (this.ggxz == false) {
							this.$message('请选择规格')
							return
						}
					}
					this.$http({
						url: this.$http.adornUrl('/selfCart/save'),
						method: 'post',
						data: this.$http.adornData({
							'goodsId': goodsId,
							'number': this.num,
							'skuId': this.skuId ? this.skuId : this.goodsDetails.sku[0].id,
							'userId': userId
						})
					}).then(({data}) => {
						if (data.status == 0) {
							this.skuId = ''
							this.num = 0
							this.$message({
								showClose: true,
								message: '添加成功',
								type: 'success'
							});
							this.carList()
						}
					})
				} else {
					this.$notify({
						title: '提示',
						message: '请先前往登录',
						type: 'warning'
					});
				}


			},
			// 获取购物车数据
			carList() {
				let userId = this.$cookie.get('userId');
				this.$http({
					url: this.$http.adornUrl('/selfCart/list'),
					method: 'get',
					params: this.$http.adornParams({
						'page': 1,
						'size': 100,
						'userId': userId
					})
				}).then(({data}) => {
					this.carLists = data.data.number
				})
			},
			// 点击导航菜单，页面滚动到指定位置
			handleLeft(index) {
				this.navgatorIndex = index;

				this.$el.querySelector(`#id${index}`).scrollIntoView({
					behavior: "smooth", // 平滑过渡
					block: "start" // 上边框与视窗顶部平齐。默认值
				});
				this.listBoxState = false;

				let timeId;
				clearTimeout(timeId);
				timeId = setTimeout(() => {
					this.listBoxState = true;
				}, 200);
			},
			// 监听页面元素滚动，改变导航栏选中
			scrollToTop() {
				// 获取视窗高度
				var domHight = document.body.offsetHeight;
				// dom滚动位置
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				if (this.listBoxState) { //作用是点击导航栏时，延迟这里执行。
					this.listBox.map((v, i) => {
						// 获取监听元素距离视窗顶部距离
						var offsetTop = document.getElementById(`id${i}`).offsetTop;
						// 获取监听元素本身高度
						var scrollHeight = document.getElementById(`id${i}`).scrollHeight;

						// 如果 dom滚动位置 >= 元素距离视窗距离 && dom滚动位置 <= 元素距离视窗距离+元素本身高度
						// 则表示页面已经滚动到可视区了。
						if (scrollTop >= offsetTop && scrollTop <= (offsetTop + scrollHeight)) {
							// 导航栏背景色选中
							this.navgatorIndex = i;
						}
					})
				}
			},
			getMaxMoney() {
				this.$http({
					url: this.$http.adornUrl('/common/type/41'),
					method: 'get',
					params: this.$http.adornParams({})
				}).then(({data}) => {
					if (data.status == 0) {
						this.maxMoney = data.data.value
					}
				})
			},
			// 获取商品详情
			dataSelect() {
				let goodsId = this.$route.query.id
				this.title = this.$route.query.title
				this.goodsId = goodsId
				this.$http({
					url: this.$http.adornUrl('/selfGroup/find'),
					method: 'get',
					params: this.$http.adornParams({
						'id': goodsId
					})
				}).then(({data}) => {
					this.goodsDetails = data.data
					console.log(this.goodsDetails)
					this.goodsDetails.img = this.goodsDetails.img.split(',')
					this.imgUrl = this.goodsDetails.img[0]
					this.srcList = this.goodsDetails.img
					this.saveBrowse()
					if (this.title == '拼团购') {
						console.log('-------')
						if (this.goodsDetails.goods.attr) {
							console.log('+++++++++')
							if (this.goodsDetails.goods.attr.length > 0) {
								console.log('***********')
								this.attrValue = [];
								if (this.userId) {
									this.shengji = ((parseFloat(data.data.goods.memberPrice) * parseFloat(data.data.goods.commissionPrice)) *
										parseFloat(this.maxMoney)).toFixed(2);
									console.log(this.shengji)
								} else {
									this.shengji = ((parseFloat(data.data.goods.price) * parseFloat(data.data.goods.commissionPrice)) *
										parseFloat(this.maxMoney)).toFixed(2);
								}
								this.goodsDetails.goods.attr[0].attrValue.forEach(d => {
									let data = {
										name: ''
									}
									this.checkStateList.push(data);
									let detail = [];
									d.detail.split(',').forEach(d => {
										let data = {
											name: '',
											state: ''
										}
										data.name = d;
										detail.push(data);
									});
									d.detail = detail;
									d.attrId = '';
									d.goodsId = '';
									this.attrValue.push(d);
								});
								this.attrValue = this.goodsDetails.goods.attr[0].attrValue
							}
						}
					} else {
						if (this.goodsDetails.attr) {
							if (this.goodsDetails.attr.length > 0) {
								this.attrValue = [];
								if (this.userId) {
									this.shengji = ((parseFloat(data.data.memberPrice) * parseFloat(data.data.commissionPrice)) * parseFloat(this.maxMoney)).toFixed(2);

								} else {
									this.shengji = ((parseFloat(data.data.price) * parseFloat(data.data.commissionPrice)) * parseFloat(this.maxMoney)).toFixed(2);
								}
								console.log(this.shengji)
								this.goodsDetails.attr[0].attrValue.forEach(d => {
									let data = {
										name: ''
									}
									this.checkStateList.push(data);
									let detail = [];
									d.detail.split(',').forEach(d => {
										let data = {
											name: '',
											state: ''
										}
										data.name = d;
										detail.push(data);
									});
									d.detail = detail;
									d.attrId = '';
									d.goodsId = '';
									this.attrValue.push(d);
								});
								this.attrValue = this.goodsDetails.attr[0].attrValue
							}
						}
					}
				})
			},
			//获取评论
			// 获取商品数据
			pinglunSelect() {
				let goodsId = this.$route.query.id
				this.$http({
					url: this.$http.adornUrl('/selfGoodsComment/list'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page - 1,
						'size': this.size,
						'scoreType': 0,
						'goodsId': goodsId
					})
				}).then(({data}) => {
					this.pinglunLists = data.data
					for (var i in this.pinglunLists.content) {
						this.pinglunLists.content[i].img = this.pinglunLists.content[i].img.split(',')
					}
				})
			},
			// 热卖推荐
			remaiSelect() {
				let goodsId = this.$route.query.id
				this.$http({
					url: this.$http.adornUrl('/goods/selling'),
					method: 'get',
					params: this.$http.adornParams({
						'page': 0,
						'size': 5,
						'sort': 'createAt'
					})
				}).then(({data}) => {
					this.dataList2 = data.data.content
				})
			},
		}
	}
</script>

<style scoped = "scoped">
	.div1 {
		height: 100vh;
		overflow-x: hidden;
	}

	/*  */
	.tong {
		width: 1200px;
		margin: 0 auto;
		margin-top: 15px;
		box-sizing: border-box;
		overflow: hidden;
	}

	.two {
		margin-bottom: 15px;
	}

	.one {
		padding: 20px;
		background: #fff;
		display: flex;
		justify-content: space-between;
	}

	.box {
		display: inline-block;
	}

	.imgs {
		width: 30%;
		margin-right: 1%;
	}

	.imgTop {
		width: 100%;
		height: 340px;
		padding: 10px;
		box-sizing: border-box;
	}

	.imgList {
		width: 100%;
	}

	.imgName {
		width: 24%;
		height: 84px;
		display: inline-block;
		padding: 5px;
		box-sizing: border-box;
	}

	.oneRight {
		width: 68%;
	}

	.titleR {
		font-size: 18px;
		color: #333;
		font-weight: 600;
		line-height: 50px;
	}

	.moneyR {
		/* margin-top: 20px; */
		background: #FF2D55;
		height: 50px;
		line-height: 50px;
		color: #fff;
		padding: 0 20px;
		border-radius: 4px 4px 0 0;
		font-size: 14px;
	}

	.moneyR span {
		display: inline-block;
	}

	.leftR {

		font-size: 16px;
		width: 86px;
	}

	.xiao {
		font-size: 14px;
	}

	.xianjiaR {
		font-size: 21px;
		font-weight: 600;
	}

	.yuanjia {
		margin-left: 10px;
		text-decoration: line-through
	}

	.guige {
		background: #F5F7FA;
		margin-top: 20px;
		border-radius: 4px;
		font-size: 12px;
		color: #666;
		padding: 15px;
	}

	.guigeT {
		display: inline-block;
		line-height: 40px;
	}

	.guigeL {
		width: 80px;
	}

	.guige2 {
		background: #fff;
		margin-top: 0;
	}

	.guigelist {
		display: inline-block;
		padding: 4px 10px;
		border: 1px solid #999;
		margin: 0 4px;
		background: #fff;
		height: 20px;
		line-height: 20px;
		cursor: pointer;
	}

	.active1 {
		color: #FF2D55;
		border: 1px solid #FF2D55;
	}

	.btns {
		padding: 0 20px;
	}

	.btns button {
		width: 180px;
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		border: 1px solid #FF2D55;
		margin-right: 20px;
	}

	.goumai {
		color: #FF2D55;
		background: #FFE5EA;
	}

	.jiagou {
		color: #fff;
		background: #FF2D55;
	}

	.twoL {
		width: 30%;
		float: left;
		background: #fff;
		padding: 15px;
		box-sizing: border-box;
	}

	.twoTitle {
		line-height: 40px;
		font-size: 18px;
		color: #333;
		font-weight: 600;
	}

	.twoR {
		/*margin-left: 31%;*/
		background: #fff;
		width: 69%;
		padding: 20px;
		box-sizing: border-box;
		float: right;
	}

	/*  */
	.div {
		width: 100%;
	}

	.navgator {
		/* width: 200px; */
		position: relative;
		top: 0;
		border-bottom: 1px solid #efefef;
		line-height: 50px;

	}

	.navgatorLi {
		/* width: 20%; */
		/* height: 2rem;
		line-height: 2rem; */
		display: inline-block;
		justify-content: center;
		align-items: center;
		/* border: 1px solid #ccc; */
		border-top: none;
		margin: 0 20px;
		/* margin-bottom: 15px; */
		cursor: pointer;

	}

	.isActive {
		color: #FF2D55;
		border-bottom: 3px solid #FF2D55;
	}

	.rightList {
		margin-top: 15px;
	}

	.oneR {
		height: 50px;
		line-height: 50px;
		font-size: 20px;
		font-weight: 600;
	}

	.icon {
		width: 20px;
		height: 20px;
		margin-right: 10px;
	}

	.oneB {
		border: 1px solid #F2F2F2;

		color: #333;
		width: 100%;
		margin: 20px 0;
	}

	/* .oneB tr{
		width: 100%;
	} */
	.td1 {
		border-right: 1px solid #F2F2F2;
		border-bottom: 1px solid #F2F2F2;
		width: 20%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 14px;
		font-weight: 600;
	}

	.td2 {
		border-bottom: 1px solid #F2F2F2;
		height: 40px;
		line-height: 40px;
		width: 32%;
		font-weight: 100;
		font-size: 12px;
		text-align: left;
		padding: 0 10px;
	}

	.td3 {
		width: 200px;
		font-weight: 100;
		font-size: 12px;
		text-align: left;
		padding: 0 10px;
	}

	.td4 {
		border-bottom: none;
	}

	.oneC {
		margin: 20px 0;
	}

	.pinglunList {
		margin: 10px 0;
		border-top: 1px solid #EFEFEF;
		padding: 10px 0;
	}

	.plName {
		display: inline-block;
		margin-right: 30px;
		color: #999;
		font-size: 16px;
	}

	.pinglun {
		font-size: 18px;
		color: #333;
		margin: 10px 0;
	}

	.imgUrl {
		margin: 10px 10px 10px 0;
		width: 100px;
		height: 100px;
	}

	.pinglunTime {
		color: #999;
		font-size: 16px;
	}

	.pintuan {
		/*width: 100%;*/
		/*display: flex;*/
		margin-top: 20px;
		background: #F5F7FA;
		padding: 15px;
	}

	.pintuan-title {
		width: 80px;
		margin-bottom: 10px;
		font-size: 18px;
		font-weight: bold;
	}

	.pintuan-list {
		color: #666;
	}

	.pintuan-item {
		display: flex;
		margin: 10px 0;
	}

	.pintuan-item > .name {
		width: 120px;
	}

	.endTime {
		width: 250px;
	}

	.pintuan-item > .num {
		width: 100px;
	}

	.pintuan-but {
		width: 60px;
		height: 20px;
		color: #fff;
		line-height: 20px;
		background: #f00;
		text-align: center;
		border-radius: 5px;
		cursor: pointer;
	}
</style>
